<!-- 解锁/加锁操作 -->
<template>
  <div v-if="visible">
    <a-modal 
      v-model="modalVisible" 
      @ok="handleSubmit"
      @cancel="handleCancel"
      centered
      :maskClosable="false"
      :width="400"
      v-dragModal
    >
      <template slot="title">
        <!-- <i class="icon icon-exclaim64f tip-icon"></i> -->

          <Iconfont class="icon tip-icon" type="icon-exclaim64f"></Iconfont>
        <!-- 解锁 -->
        <span v-if="unlockType=='user' || unlockType=='client'">{{$t('Unlock')}}</span>
        <!-- 加锁 -->
        <span v-else-if="unlockType=='addLock'">{{$t('Lock')}}</span>
      </template>

      <div>
        <span v-if="unlockType=='user'">
          {{$store.state.language=='zh' ? '您确定对用户 "'+ targetUser.username +'" 进行解锁吗？' : 'Are you sure to unlock user "'+ targetUser.username +'"?' }}
        </span>
        <span v-else-if="unlockType=='client'">
          {{$store.state.language=='zh' ? '您确定对客户端IP "'+ targetUser.ip +'" 进行解锁吗？' : 'Are you sure to unlock client ip "'+ targetUser.ip +'"?' }}
        </span>
        <div v-else-if="unlockType=='addLock'">
          <span v-if="$store.state.language=='zh'">
            您确定对用户 "{{targetUser.username}}" 进行加锁吗？
          </span>
          <span v-else>
            Are you sure to lock user "{{targetUser.username}}"?
          </span>
        </div>
      </div>

      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button class="error-btn submit-btn" @click="handleSubmit" :loading="submitLoading">
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "LockOperate",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetUser: {
      // type: Object
    },
    unlockType: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      modalVisible: false,
      submitLoading: false,
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  methods: {
    //解锁或加锁操作
    async handleSubmit() {
      let res;
      if(this.unlockType == 'user') { // 解锁用户操作
        res = await this.$api.userManage.unlockUserRequest({id: this.targetUser.id, sources_name: this.targetUser.sources_name, user_type: this.targetUser.user_type })
      }else if(this.unlockType == 'client') { // 解锁客户端操作
        res = await this.$api.userManage.unlockClientRequest({request_ip: this.targetUser.ip})
      }else if(this.unlockType == 'addLock') { // 用户加锁操作
        res = await this.$api.userManage.addLockRequest({id: this.targetUser.id, sources_name: this.targetUser.sources_name, user_type:this.targetUser.user_type })
      }
      if(res && res.data) {
        this.model(res.data.id) //返回模板
        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        if(res.data.flag == 0) {
          this.$emit('updateData');
        }
      }
      this.handleCancel()
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperateModal', 'lock-operate');
    },
  },
}
</script>
<style scoped>
  .tip-icon {
    color: var(--mainOrangeColor);
    margin-right: 8px;
  }
  .error-btn {
    background-color: var(--mainOrangeColor);
    border-color: var(--mainOrangeColor);
    color: #fff;
  }
  .submit-btn {
    width: 70px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: none;
  }
  ::v-deep.ant-modal-footer {
    border-top: none;
  }
  ::v-deep.ant-modal-body {
    padding: 12px 24px;
  }
</style>